<template>
  <div>
    <el-container>
      <el-header>
        <h1>欢迎来到管理页面！！！</h1>
      </el-header>
      <el-main>
        <el-divider></el-divider>
        <el-table :data="tableData"  style="width: 100%">
          <el-table-column prop="id" label="用户id"  width="width: 10%">
          </el-table-column>
          <el-table-column prop="userName" label="用户名称"  width="width: 10%">
          </el-table-column>
          <el-table-column prop="gender" label="性别"  width="width: 20%">
          </el-table-column>
          <el-table-column prop="role" label="用户角色"  width="width: 20%">
          </el-table-column>
          <el-table-column prop="healthStatus" label="健康状态" width="width: 14%">
          </el-table-column>
          <el-table-column prop="dietaryPrefer" label="饮食偏好"   width="width: 14%">
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-popconfirm
                  title="这是一段内容确定删除吗？"
                  @confirm="deletePost(scope.row)"
              >
                <el-button slot="reference" type="danger" size="mini" >删除用户<i class="el-icon-edit"></i></el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer>
        <div style="padding: 10px 0">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
      </el-footer>
    </el-container>


  </div>
</template>
<script>
import request from '@/utils/request'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'admin',
  data () {
    return {
      userName:'',
      pageNum:1,
      pageSize:10,
      total:0,
      role:'',
      sortProp: 'create_time',
      sortable: 'descending',
      tableData:{}
    }
    },
  created () {
    this.userName=this.$route.params.userName
    this.role=this.$route.params.role
    console.log('跳转的userName是: '+this.userName)
    console.log('用户的角色是: '+this.role)
    this.loadPage('admin')
  },
  methods: {
    handleSizeChange (pageSize) {
      this.pageSize = pageSize
      this.loadPage('admin')
    },
    deletePost(row){
      request.get('http://localhost:4009/admin/delete', {
        params: {
          id:row.id
        }
      }).then(res => {
        console.log(res)
        if (res.status !== 200){
          this.$message.error(res.message)
        }else {
          this.$message.success(res.message)
          this.loadPage("admin");
        }
      })



    },
    handleCurrentChange (pageNum) {
      this.pageNum = pageNum
      this.loadPage('admin')
    },
    loadPage (userType) {
      if (userType === 'admin'){
        request.get('http://localhost:4009/admin/showAll', {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            sortProp: this.sortProp
          }
        }).then(res => {
          console.log(res)
          this.tableData = res.data
          this.total = res.total
        })
      }

    }
  }
}
</script>
